<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>用户最喜欢的商品</title>
    <!-- 引入ECharts -->
    <script src="/static/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/echarts.min.js" type="text/javascript" charset="utf-8"></script>
    <style>
        #chart-container {
            width: 800px;
            height: 200px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="chart-container"></div>
<div id="main1" style="width: 600px;height:400px;"></div>

<script type="text/javascript">
    var myChart1 = echarts.init(document.getElementById('main1'));

    $.post(
        '/echarts',
        function (jsonObj) {
            console.log(jsonObj);
            var xArray = new Array();
            var yArray = new Array();
            $(jsonObj.data).each(function () {
                xArray.push("用户" + this.userId +"  商品：" + this.favoriteProduct);
                yArray.push(this.count);
            });

            var option1 = {
                title: {
                    text: '用户最喜欢的商品'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: xArray
                },
                yAxis: {
                    type: 'value',
                    name: '购买次数'
                },
                series: [
                    {
                        name: '购买次数',
                        type: 'bar',
                        data: yArray,
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{c}'
                        }
                    }
                ],
                color: ['#5470c6']
            };

            myChart1.setOption(option1);
        },
        'json'
    );
</script>
</body>
</html>